<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom方法</title>
</head>
<body>
    <!-- insertAdjacentHTML 是 JavaScript 中的一个 DOM 方法，它允许你将 HTML 字符串插入到指定元素相对于其位置的某个位置。
    这个方法非常有用，因为它提供了一种在不直接操作 DOM 结构的情况下动态添加内容的方式。

insertAdjacentHTML 方法接受两个参数：
position：一个字符串，指定了新内容应该被插入的位置。这个参数可以是以下四个值之一：
'beforebegin'：在元素自身之前插入内容，即作为它的前一个同级元素。
'afterbegin'：在元素内部的第一个子节点之前插入内容。
'beforeend'：在元素内部的最后一个子节点之后插入内容（这是默认行为，如果没有指定 position 参数，则假定为 'beforeend'）。
'afterend'：在元素自身之后插入内容，即作为它的下一个同级元素。
text：一个字符串，表示要插入的 HTML 或 XML。这个字符串会被解析为 HTML（或 XML，取决于文档的类型），并插入到指定的位置。 -->

<script>
    // 定义一个函数，当鼠标移动时会被调用
function handleMouseMove(event) {
    console.log('Mouse moved at:', event.clientX, event.clientY);
}
 
// 给文档添加鼠标移动事件监听器
document.onmousemove = handleMouseMove;

//appendChild() 允许你添加一个节点或元素作为另一个元素的子元素。
const parentElement = document.createElement("button")
const parentElementText = document.createTextNode("Click me")

// attach the text "Click me" to the button
parentElement.appendChild(parentElementText)
 
 //如果元素上不存在该类，则 toggle 方法会添加该类；如果元素上存在该类，则删除该类。
 element.classList.toggle("class-to-toggle");
</script>
</body>
</html>